<template>
  <!-- 2.准备一个容器，设置宽高 -->
  <div class="charts" ref="charts"></div>
</template>

<script>
// 1.引入插件echarts
import * as echarts from "echarts";
export default {
  // 页面中的结构挂载完毕，可以获取容器节点
  mounted() {
    // 初始化echarts实例
    let mycharts = echarts.init(this.$refs.charts);
    // 配置项
    let option = {
      // 布局调整
      grid: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
      },
      xAxis: {
        show: false,
        type: "category", //x轴均匀分布
        boundaryGap: false, //两边不留白
      },
      yAxis: {
        show: false,
      },
      series: [
        {
          data: [0, 34, 47, 21, 9, 54, 28, 32, 31, 17, 28, 39, 47],
          type: "line",
          //   平滑曲线
          smooth: true,
          // 拐点不要
          symbol: "none",
          //   填充颜色
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "red", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "blue", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          //   线条颜色
          lineStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "green", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "red", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    };
    // 设置配置项
    mycharts.setOption(option);
    //当浏览器的窗口发生变化的时候监听事件---DOM2级事件
    window.addEventListener("resize", () => {
      // 图表自适应
      mycharts.resize();
    });
  },
};
</script>

<style scoped lang="scss">
.charts {
  width: 100%;
  height: 100%;
}
</style>
